<template>
  <div class="page">
    <el-row :gutter="20">
      <el-col
        :xs="24"
        :sm="24"
        :md="24"
        :lg="12"
        :xl="12"
        v-for="(i, index) in tableList"
        :key="index"
      >
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <h4>{{ i.name }}</h4>
          </div>
          <div>
            <div class="selectData">
              <span style="margin-right:10px;">部门:</span>
              <el-select
                size="small"
                class="userIntSize"
                filterable
                v-model="i.department"
                clearable
                placeholder="请选择"
                @change="
                  value => {
                    changdepartments1(value, i.id);
                  }
                "
              >
                <el-option
                  v-for="item in i.departments"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
              <span style="margin-right:10px;">季度:</span>
              <el-select
                size="small"
                class="userIntSize"
                v-model="i.quarter"
                clearable
                placeholder="请选择"
                @change="
                  value => {
                    changequarterId1(value, i.id);
                  }
                "
              >
                <el-option
                  v-for="item in quarterList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
            <div class="tableStyle">
              <div :id="i.id"></div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      quarterList: [
        { id: 1, name: "第一季度" },
        { id: 2, name: "第二季度" },
        { id: 3, name: "第三季度" },
        { id: 4, name: "第四季度" },
      ],
      tableList: [],
    };
  },
  mounted() {
    this.dataAnalysis();
  },
  methods: {
    dataAnalysis() {
      this.$axios.post("/dept/getDepartmentTypeList").then((res) => {
        if (res.code == 200) {
          console.log(res, 77777);
          let data = res.data;

          data.forEach((i, index) => {
            if (i.id == 5) {
              data.splice(index, 1);
            }

            if (i.departments && i.departments.length != 0) {
              i["department"] = i.departments[0].id;
              i["quarter"] = 1;
            }
          });
          this.tableList = data;
          if (data[0].department && data[0].department.length != 0) {
            this.dataTable1(data[0].department, data[0].quarter, data[0].id);
          }
          if (data[1].department && data[1].department.length != 0) {
            this.dataTable1(data[1].department, data[1].quarter, data[1].id);
          }
          if (data[2].department && data[2].department.length != 0) {
            this.dataTable1(data[2].department, data[2].quarter, data[2].id);
          }
          if (data[3].department && data[3].department.length != 0) {
            this.dataTable1(data[3].department, data[3].quarter, data[3].id);
          }
        }
      });
    },
    dataTable1(deptId, quarter, id) {
      let dataX = [];
      let dataY = [];
      this.$axios
        .post("/deptScore/getScoreByDeptId", {
          deptId: deptId,
          quarter: quarter,
          year: "2020",
        })
        .then((res) => {
          if (res.code == 200) {
            // console.log(res.data);
            res.data.forEach((element) => {
              dataX.push(element.taskName);
              dataY.push(element.score);
            });
            var table1 = this.$echarts.init(document.getElementById(id));
            table1.setOption({
              // color: ["#0099FF"],
              title: {
                text: "",
                left: "center",
              },
              grid: {
                height: 350,
              },
              tooltip: {
                trigger: "axis",
                position: function (pt) {
                  return [pt[0], "10%"];
                },
              },
              xAxis: {
                type: "category",
                data: dataX,
                axisLabel: {
                  interval: 0,
                  rotate: 60,
                },
              },
              yAxis: {
                type: "value",
                min: 60,
                max: 100,
              },
              series: [
                {
                  data: dataY,
                  type: "bar",
                  // showBackground: true,
                  barWidth: 30,
                  backgroundStyle: {
                    color: "rgba(220, 220, 220, 0.8)",
                  },
                  itemStyle: {
                    normal: {
                      //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                      color: function (params) {
                        var colorList = [
                          "#c52b6a",
                          "#ec4290",
                          "#ea3acf",
                          "#d539f7",
                          "#a82ada",
                          "#8114c0",
                          "#d8bd26",
                          "#b8ca23",
                          "#76a905",
                          "#80c13d",
                          "#4da758",
                          "#4aa4a5",
                          "#2a65b1",
                        ];
                        return colorList[params.dataIndex];
                      },
                    },
                    //鼠标悬停时：
                    emphasis: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: "rgba(0, 0, 0, 0.5)",
                    },
                  },
                },
              ],
            });
          }
        });
    },
    changdepartments1(val, data) {
      // console.log(val);
      // console.log(data);
      this.dataTable1(val, this.tableList[data - 1].quarter, data);
    },
    changequarterId1(val, data) {
      // console.log(val);
      // console.log(data);
      this.dataTable1(this.tableList[data - 1].department, val, data);
    },
  },
};
</script>

<style lang="less" scoped>
.tableStyle {
  width: 100%;
  height: auto;

  // padding-top: 40px;
  > div {
    width: 100%;
    height: 500px;
    margin-bottom: 20px;
  }
}
.selectData {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
